<template>
  <div class="logo-3d" :style="`width: ${w}px; height: ${w}px`">
    <figure
      class="cube-outter"
      :style="`transform: rotateX(-36deg) rotateY(${
        45 + rotate
      }deg) rotateZ(0deg);`"
    >
      <section
        class="cube-face"
        :style="`transform: translateZ(${w / 2}px);`"
      ></section>
      <section
        class="cube-face"
        :style="`transform: translateZ(${-w / 2}px);`"
      ></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
    </figure>
    <figure
      class="cube-inner"
      :style="`transform: translate(-50%, -50%) rotateX(-36deg) rotateY(${
        45 - rotate
      }deg) rotateZ(0deg);`"
    >
      <section
        class="cube-face"
        :style="`transform: translateZ(${w / 4}px);`"
      ></section>
      <section
        class="cube-face"
        :style="`transform: translateZ(${-w / 4}px);`"
      ></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
      <section class="cube-face"></section>
    </figure>
  </div>
</template>

<script>
export default {
  props: {
    w: {
      type: Number,
      default: 20
    }
  },
  data () {
    return {
      rotate: 0,
      timer: null
    }
  },

  created () {
    this.uodateRotate()
  },

  mounted () {
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        clearTimeout(this.timer)
      }
      if (document.visibilityState === 'visible') {
        this.uodateRotate()
      }
    })
  },

  methods: {
    uodateRotate () {
      this.timer = setTimeout(() => {
        this.rotate += 90
        this.uodateRotate()
      }, 5000)
    }
  }
}
</script>

<style lang="less" scoped>
.logo-3d {
  transform-style: preserve-3d;
  .cube-outter {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    transform: rotateX(-36deg) rotateY(45deg) rotateZ(0deg);
    transition: 0.5s ease-in;
    .cube-face {
      width: 100%;
      height: 100%;
      background: rgba(25, 197, 74, 0.2);
      border: 1px solid #fff;
      position: absolute;
      left: 0;
      top: 0;
      &:nth-child(3) {
        transform: translateY(-50%) rotateX(-90deg);
      }
      &:nth-child(4) {
        transform: translateY(50%) rotateX(-90deg);
      }
      &:nth-child(5) {
        transform: translateX(50%) rotateY(-90deg);
      }
      &:nth-child(6) {
        transform: translateX(-50%) rotateY(-90deg);
      }
    }
  }
  .cube-inner {
    width: 50%;
    height: 50%;
    transform-style: preserve-3d;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) rotateX(-36deg) rotateY(45deg)
      rotateZ(0deg);
    transition: 0.5s ease-in;
    .cube-face {
      width: 100%;
      height: 100%;
      background: rgba(25, 197, 74, 1);
      border: 1px solid #fff;
      position: absolute;
      left: 0;
      top: 0;
      &:nth-child(3) {
        transform: translateY(50%) rotateX(-90deg);
      }
      &:nth-child(4) {
        transform: translateY(-50%) rotateX(-90deg);
      }
      &:nth-child(5) {
        transform: translateX(50%) rotateY(-90deg);
      }
      &:nth-child(6) {
        transform: translateX(-50%) rotateY(-90deg);
      }
    }
  }
}
</style>
